<template>
  <div class="index_html">
    <div class="banner">
      <el-carousel :interval="5000" arrow="never">
        <el-carousel-item v-for="(item,index) in bannerList" :key="index">
          <a :href="item.bannerUrl" target="_blank"><div class="imgs_s" :style="{backgroundImage:'url('+ ImgPath + item.bannerPath +')'}"></div></a>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="index2 pad6">
      <div class="box80">
        <div class="font30">最新应用面</div>
        <div class="add">
          <router-link to="/selectLampType">查看更多 >></router-link>
        </div>
        <ul class="wid100">
          <li>
            <router-link :to="{ path: '/selectLampListAll' }">
              <div class="img_2">
                <div class="img_2_conts" ><!--  :style="{backgroundImage:'url('+ImgPath +  item.sketchMap + ')'}" -->
                  <img src="http://hgh-oss.oss-cn-beijing.aliyuncs.com/static/real/images/201909/o_1dk34kjfapa5o8m1tml163rksoc.png" class="img_2_img" alt="">
                      <div class="font16">全部...</div>
                </div>
              </div>
              
            </router-link>
          </li>
          <li v-for="(item, index) in tableData" :key="index">
            <router-link :to="{ path: '/selectLampList',query:{id:item.id} }" v-if="index<=2">
              <div class="img_2">
                <div class="img_2_cont" ><!--  :style="{backgroundImage:'url('+ImgPath +  item.sketchMap + ')'}" -->
                  <img :src="ImgPath +  item.sketchMap" class="img_2_img" alt="">
                      <img src="@/assets/images/icon_12.png" class="img3" alt>
                </div>
              </div>
              <div class="font16">{{item.contestDescribe}}</div>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
    <div class="index3 pad6">
      <div class="box80">
        <div class="font30 title">最新产品</div>
        <div class="add">
          <router-link to="/productScreen">查看更多 >></router-link>
        </div>
        <div class="wid100">
          <div class="index3_lt" v-for="(item,index) in newProductList" v-if="index==0"  @click="showDetail(item.id)">
              <img :src="ImgPath + item.waiGuanPic" style="height:518px">
              <div class="cont">
                  <p class="font30">{{item.lumTypeName}}</p>
                  <p class="font16">{{item.brandName}}</p>
              </div>
          </div>
          <div class="index3_rt">
            <div class="list" v-for="(item,index) in newProductList" v-if="index>0"  @click="showDetail(item.id)">
                <img :src="ImgPath + item.waiGuanPic" style="height:253px">
                <div class="cont">
                    <p class="font14">{{item.brandName}}</p>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style  rel="stylesheet/scss" lang="scss" >
.banner a{
  display: block;
  height: 100%;
}
.index_html {
  margin-top: 88px;
  .add {
    text-align: center;
    a {
      padding: 7px 36px;
      color: #fff;
      background-color: #5a63a3;
      border-radius: 3px;
      display: inline-block;
    }
  }
  .el-carousel {
    height: 560px;
    .el-carousel__container {
      .el-carousel__item {
        height: 560px;
        .imgs_s {
          height: 100%;
          background-size: cover;
          background-repeat: no-repeat;
        }
      }
    }
    .el-carousel__indicator .el-carousel__button {
      width: 15px;
      height: 15px;
      border-radius: 50%;
    }
  }
  .index2 {
    background: url("../../assets/images/indexbg.png") no-repeat center;
    background-size: cover;
    .add{
      text-align: right;
      margin-bottom: 10px;
      a{
        padding: 0;
        background:none;
        color: rgba(91, 100, 163, 0.9); 
      }
    }
    .font30 {
      text-align: center;
      margin-bottom: 50px;
      color: #333333;
    }
    li {
      width: 23%;
      margin-left: 2.666666%;
      float: left;
      text-align: center;
      margin-bottom: 3rem;
      position: relative;
      &:first-child {
        margin-left: 0;
      }
      .font16 {
        margin: 10px 0;
        color: #000020;
        position: absolute;
        width: 100%;
        bottom: 0;
        left: 0;
        display: none;
      }
      .img_2 {
        .img_2_conts{
          background: rgba(214,208,214,0.8);
            .img_2_img{
              opacity: 0;
            }
            .font16{
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate3d(-50%,-25%,0);
              color: #555555;
              z-index: 999999;
              display: block;
              font-size: 20px;
              height: auto;
              padding: 0;
              line-height: normal;
            }
            &:hover{
                  background-color: rgba(91, 100, 163, 0.9);
                  .font16{
                    color: #fff;
                  }
            }
        }
        .img_2_cont {
          height: 100%;
          background-size: cover;
          background-repeat: no-repeat;
          position: relative;
          .img_2_img{
                position: relative;
                display: block; 
          }
          .img3 {
            display: none;
            position: absolute;
            left: 50%;
            top: 50%;
            transform:translate(-50%,-50%);
            -webkit-transform:translate(-50%,-50%);
            z-index: 9;
          }
          .BoxTable{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
  .index3 {
    background-color: #f1f1f1;
    .add{
      text-align: right;
      margin-bottom: 10px;
      a{
        padding: 0;
        background:none;
        color: rgba(91, 100, 163, 0.9); 
      }
    }
    .title {
      text-align: center;
      color: #333;
      margin-bottom: 3rem;
    }
    p.font30 {
      margin-bottom: 8px;
    }
    p.font14 {
      color: #020202;
      font-size: 14px;
    }
    .BoxTable {
      height: auto;
      position: absolute;
      bottom: 20px;
      left: 30px;
    }
    .wid100 {
      margin-bottom: 40px;
    }
    .index3_lt {
      width: calc(40% - 5px);
      width: -webkit-calc(40% - 5px);
      float: left;
      margin-right: 10px;
      background: #fff;
      img{
        width: auto;
        height: auto;
      }
      .imgss {
        position: relative;
        height: 520px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        padding: 23px;
      }
      .cont{
        background-color: #ffffff;
        padding: 15px 30px;
        p.font30{
          color: #020202;
        }
        p.font16{
          color: #020202;
        }
      }
    }
    .index3_rt {
      width: calc(60% - 5px);
      width: -webkit-calc(60% - 5px);
      float: left;
      background: #fff;
      img{
        width: auto;
        height: auto;
      }
      .list{
        width: calc(33.333% - 5px);
        float: left;
        margin-bottom: 10px;
        margin-left: 7.5px;
      }
      .list:nth-child(3n + 1) {
        margin-left: 0px;
      }
      .imgss {
        position: relative;
        height: 253px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        padding: 23px;
      }
      .cont{
        background-color: #ffffff;
        padding: 10px;
        p{
          font-size: 14px;
        }
      }
    }
  }
}
@media (max-width: 1600px) {
  .index_html .index3 .index3_lt .imgss{height: 490px}
  .index_html .index3 .index3_rt .imgss{height: 239px;}
  .index_html .el-carousel {
    height: 450px;
    .el-carousel__container .el-carousel__item {
      height: 450px;
    }
  }
}
@media (max-width: 1500px){

}
@media (max-width: 1400px) {
  .index_html .el-carousel {
    height: 400px;
    .el-carousel__container .el-carousel__item {
      height: 400px;
    }
  }
  .index_html .index3 {
    .index3_lt .imgss {
      height: 490px;
    }
    .index3_rt .imgss {
      height: 240px;
    }
  }
}
@media (max-width: 1200px) {
  .index_html .el-carousel {
    height: 350px;
    .el-carousel__container .el-carousel__item {
      height: 350px;
    }
  }
  .index_html .index2 li .img_2 {
    height: 210px;
  }
  .index_html .index3 {
    .index3_lt .imgss {
      height: 410px;
    }
    .index3_rt .imgss {
      height: 200px;
    }
  }
}
@media (max-width: 992px) {
  .index_html .index2 .font30,
  .index_html .index3 .title {
    margin-bottom: 20px;
  }
  .index_html .index2 li {
    margin-bottom: 1rem;
  }
  .index_html .index2 li .img_2 {
    height: 150px;
  }
  .index_html .index2 li a:hover .img_2 .img_2_cont img {
    height: 46px;
  }
}
@media (max-width: 767px) {
  .index_html {
    margin-top: 66px;
    .el-carousel {
      height: 300px;
      .el-carousel__container .el-carousel__item {
        height: 300px;
      }
      .el-carousel__indicator .el-carousel__button {
        width: 10px;
        height: 10px;
      }
    }
    .index2 li {
      width: 49%;
      margin-left: 2%;
      &:nth-child(odd) {
        margin-left: 0;
      }
      .font16 {
        margin: 5px 0;
      }
    }
    .add a {
      padding: 5px 26px;
      font-size: 12px;
    }
    .index3 {
      .index3_lt {
        margin-right: 0;
        width: 100%;
        height: 410px;
        margin-bottom: 10px;
      }
      .index3_rt {
        width: 100%;
      }
      .BoxTable {
        left: 0;
        bottom: 8px;
        padding-left: 20px;
        .font30 {
          margin-bottom: 4px;
        }
      }
    }
  }
}
@media (max-width: 340px) {
  .index_html .index3 .index3_lt .imgss {
    height: 280px;
  }
  .index_html .index3 .index3_lt {
    height: auto;
  }
  .index_html .index3 .wid100 {
    margin-bottom: 20px;
  }
}
</style>
<script>
export default {
  name: "app",
  data() {
    return {
      bannerList:[],
      tableData: [],
      newProductList:[],
      msg: "首页",
      imgss: [
        {
          url: require("@/assets/images/vtLight201911082109.jpg")
        },
        {
          url:require("@/assets/images/trainningAD201911082108.jpg") 
        }
      ]
    };
  },
  created() {
    let self = this;
    this.$http.get("/api/contests/newsContestTypeList", {}, function(res) {
      if (res.success) {
        self.tableData = res.data;
      }
    });
    
    //获取7个最新产品选灯列表
    this.$http.post("/api/stlamps/newStlampJson",{},function(res){
      console.log(res)
      if(res.success){
        self.newProductList = res.data
      }
    })

    this.$http.postObj("/api/banner/json",{
      page:1,
      rows:20,
      order:'asc',
      sort:'indexSorts'
    },function(res){
      console.log(res)
      self.bannerList = res.data
    })
  },methods:{
    
        showDetail(id){
             let routeUrl = this.$router.resolve({
                path: "/lampListDetails?id="+id
            });
            window.open(routeUrl.href, '_blank');
        },
  }
};
</script>
